<template>
	<view>
		<!-- 添加 v-on:scrolltolower 监听事件 -->
		<scroll-view style="height: 100vh;" v-on:scrolltolower="loadMore()">
			<view v-for="(item, index) in DataList" :key="index" class="Item">
				<!-- 显示数据列表中的内容 -->
				<image src="/static/jy.png" style="width: 50rpx;height: 50rpx;margin-right: 15rpx;" mode=""></image>
				<view class="IL">
					<view class="ILT">
						{{item.remarks}}
					</view>
					<view class="ILB">
						{{ForTime(item.ctime)}}
					</view>
				</view>
				<view class="IR">
					<view class="IRT" v-if="item.num">
						{{item.num}}
					</view>
					<view class="IRB">
						总利润:{{item.balance}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				DataList: [],
				isLoading: false // 定义一个变量用于控制是否正在加载数据
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			ForTime(e) {
				let date = new Date(e * 1000)
				let year = date.getFullYear(); // 获取年份，例如：2021
				let month = date.getMonth() + 1; // 获取月份，注意月份从0开始计算，需要加1，例如：5
				let day = date.getDate(); // 获取日期，例如：25
				let hour = date.getHours(); // 获取小时数，例如：15
				let minute = date.getMinutes(); // 获取分钟数，例如：23
				let second = date.getSeconds(); // 获取秒数，例如：35
				hour = hour < 10 ? ('0' + hour) : hour;
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			getData() {
				this.$api.edulog({
						page: this.page,
						limit: this.limit
					},
					res => {
						this.DataList = [...this.DataList, ...res.data]; // 将新获取的数据追加到之前的数据列表中
						this.isLoading = false; // 数据加载完成后将 isLoading 变量设置为 false
					}
				);
			},
			loadMore() {
				if (this.isLoading === false) {
					// 如果当前没有正在加载数据，则发送请求获取新的数据
					this.isLoading = true; // 将 isLoading 变量设置为 true
					this.page++; // 增加页码数
					this.getData(); // 发送请求获取新的数据
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.Item {
		margin: 10rpx 30rpx;
		background-color: #202226;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		color: #fff;

		.IL {
			flex: 1;

			.ILT {
				font-weight: bold;
				margin: 20rpx 0;
			}

			.ILB {
				font-size: 20rpx;
			}

		}

		.IR {
			text-align: right;

			.IRT {
				color: #ebd1a6;
				margin: 20rpx 0;
			}

			.IRB {
				font-size: 20rpx;
			}
		}
	}
</style>